<template>
  <el-card>
    <el-row slot="header" :gutter="20" class="top-container-wrap">
      <template v-for="(data,index) in data1">
        <el-col :lg="6" :md="6" :sm="12" :xs="12" :key="index">
          <div :class="['general',data.color]">
            <div style="position:relative" class="flex ">
              <svg-icon icon-class="document" class-name="document"/>
              <div>
                <p class="small">{{ data.top.title }}</p>
                <p class="mt15">{{ data.top.money }}</p>
              </div>
            </div>
            <div class="flex flex-end mt15">
              <div v-for="(item,index) in data.bottom" :key="index" class="tar  flex-auto">
                <p>{{ item.money }}</p>
                <p class="small pdt10">{{ item.title }}</p>
              </div>
            </div>
          </div>
        </el-col>
      </template>
      <template v-for="(item,index) in performance">
        <el-col :lg="6" :md="6" :sm="12" :xs="12">
            <department :info="item" :index="index"/>
        </el-col>
      </template>

    </el-row>

    <!--图表一-->
    <memberChart/>

    <!--图表二-->
    <tencentChart/>

  </el-card>
</template>

<script>
import memberChart from './components/member_chart'
import tencentChart from './components/tencent_chart'
import department from '../../components/department_statistics'

export default {
  components: {
    memberChart,
    tencentChart,
    department
  },
  data() {
    return {
      data1: [
        {
          color: 'blue',
          top: {
            title: '本年销售金额',
            money: ''
          },
          bottom: [
            {
              money: '',
              title: '应收款'
            },
            {
              money: '',
              title: '本年回款'
            }
          ]
        },
        {
          color: 'red',
          top: {
            title: '客户总数',
            money: ''
          },
          bottom: [
            {
              money: '',
              title: '公海数'
            },
            {
              money: '',
              title: '本月新增'
            },
            {
              money: '',
              title: '上月新增'
            }
          ]
        },
        {
          color: 'green',
          top: {
            title: '本月销售额',
            money: ''
          },
          bottom: [
            {
              money: '',
              title: '本月下单数'
            },
            {
              money: '',
              title: '上月销售额'
            },
            {
              money: '',
              title: '上月下单数'
            }
          ]
        },
        {
          color: 'purple',
          top: {
            title: '本月回款金额',
            money: ''
          },
          bottom: [
            {
              money: '',
              title: '上月回款金额'
            }
          ]
        }
      ],
      performance: [],
      datas: null
    }
  },
  mounted() {
    this.getDatas()
  },
  methods: {
    // 获取数据
    getDatas() {
      this.$get('action/WechatAdvs/ReportForm')
        .then(res => {
          const data = res.data
          // 本年销售额
          this.data1[0].top.money = data.AnnualSales[0]['sum(a.ad_price)'].toFixed(2) || 0
          this.data1[0].bottom[0].money = data.AnnualSales[0]['sum(a.ad_price)'].toFixed(2) || 0
          this.data1[0].bottom[1].money = data.AnnualSales[0]['sum(a.real_price)'].toFixed(2) || 0
          // 客户总数
          this.data1[1].top.money = data.客户总数[0]['count(*)'] || 0
          this.data1[1].bottom[0].money = data.公海客户总数[0]['count(*)'] || 0
          this.data1[1].bottom[1].money = data.客户本月新增[0]['count(*)'] || 0
          this.data1[1].bottom[2].money = data.客户上月新增[0]['count(*)'] || 0
          // 本月销售额
          this.data1[2].top.money = data.本月销售数据[0]['sum(a.ad_price)'].toFixed(2) || 0
          this.data1[2].bottom[0].money = data.本月销售数据[0]['count(*)'] || 0
          this.data1[2].bottom[1].money = data.上月销售数据[0]['sum(a.ad_price)'].toFixed(2) || 0
          this.data1[2].bottom[2].money = data.上月销售数据[0]['count(*)'] || 0
          // 本月回款金额
          this.data1[3].top.money = data.本月销售数据[0]['sum(a.real_price)'].toFixed(2) || 0
          this.data1[3].bottom[0].money = data.上月销售数据[0]['sum(a.real_price)'].toFixed(2) || 0

          this.performance = data.本月部门数据.map(item => {
            const obj = {}
            obj.title = item.name||'其他部门'
            obj.lists = [
              {
                title: '销售额',
                money: item['sum(a.ad_price)']&&item['sum(a.ad_price)'].toFixed(2)||0
              },
              {
                title: '成本',
                money: item['sum(a.purchase_cost)']&&item['sum(a.purchase_cost)'].toFixed(2)||0
              },
              {
                title: '利润',
                money: (item['sum(a.ad_price)']&&item['sum(a.purchase_cost)'])&&(item['sum(a.ad_price)'] - item['sum(a.purchase_cost)']).toFixed(2)||0
              },
              {
                title: '订单数',
                money: item['count(*)']&&item['count(*)']||0
              }
            ]
            return obj
          })
        })
        .catch(error => {
          console.log(error)
          setTimeout(() => this.$router.go(-1), 1500)
        })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
    .document {
        font-size: 40px;
        margin-right: 5px
    }

    .blue {
        background-color: #35AE98;
    }

    .red {
        background-color: #F05050;
    }

    .green {
        background-color: #27C24C;
    }

    .purple {
        background-color: #7266BA;
    }

    .small {
        font-size: 12px;
    }

    .flex-end {
        justify-content: flex-end;
    }

    .pdh10 {
        padding: 2px 10px;
    }

    .flex-auto {
        flex: 1;
    }

    .tar {
        text-align: right;
    }

</style>
